<extend name="Layout/base" />
<block name="css">
	<style>
		.el-main {
			padding: 20px;
		}
		.orderbox {
			padding: 20px;
			background: #fff;
			border: 1px solid #ccc;
		}
		.ordertop {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			padding-bottom: 15px;
			border-bottom: 1px solid #ccc;
		}
		.ordertop .title {
			display: flex;
		}
		.ordertop .title .status {
			margin-left: 20px;
		}
		.status span {
			margin-left: 20px;
			display: inline-block;
			box-sizing: border-box;
			width: 50px;
			height: 25px;
			line-height: 25px;
			text-align: center;
		}
		.statusnow {
			border: 1px solid #ccc;
		}
		.accept {
			border: 1px solid #ccc;
			border-radius: 6px;
			padding: 5px;
		}
		.orderdetail {
			padding: 20px 0;
			display: flex;
			margin-top: 20px;
			border-bottom: 1px solid #ccc;
		}
		.workerinfo {
			width: 50%;
			display: flex;
		}
		.teaminfo {
			display: flex;
		}
		.infotitle {
			font-size: 20px;
			white-space: nowrap;
		}
		.baseinfo {
			display: flex;
			align-items: center;
		}
		.baseinfo p {
			margin-top: 5px;
		}
		.baseinfo p span {
			display: inline-block;
			margin-left: 20px;
			min-width: 60px;
		}
		.workerinfo .img img {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			margin-left: 20px;
		}
		.jobinfo {
			display: flex;
			padding: 20px 0;
			border-bottom: 1px solid #ccc;
		}
		.other {
			margin-top: 20px;
			background: #fff;
			padding: 20px 0;
		}
		.table {
			border: 1px solid #ccc;
			margin-top: 20px;
		}
		.el-table__row img {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
		.files {
			display: flex;
			justify-content: space-around;
		}
		.files .img img {
			width: 80px;
			height: 80px;
			margin-left: 20px;
		}
		.license,.contract,.idcard {
			display: flex;
		}
		.subaccount .workerinfo {
			width: 100%;
		}
		.editinfo {
			text-align: center;
			font-size: 15px;
			margin-top: 10px;
		}
		.editinfo span {
			border: 1px solid #ccc;
			padding: 3px 8px;
		}
		.searchbox {
			text-align: right;
		}
		.el-input--suffix {
			width: 200px;
			margin-right: 20px;
		}
		.pagenation {
			text-align: center;
			margin-top: 10px;
		}
	</style>
</block>
<block name="content">
	<div class="orderbox">
		<div class="ordertop">
			<div class="title">
				<span style="color:#55a8fe;font-weight: bold;">城市合伙人</span>
				<div class="status">状态：
					<if condition="data['status'] == 1">
						<span class="statusnow">启用</span>
						<span class="">停用</span>
					<else/>
						<span class="">启用</span>
						<span class="statusnow">停用</span>
					</if>


				</div>
			</div>
			<el-button type="primary" size="small" icon="el-icon-edit" @click="toEdit">编辑</el-button>
		</div>
		<div class="orderdetail">
			<div class="workerinfo">
				<div class="infotitle">用户信息</div>
				<div class="baseinfo">
					<div class="img"><img src="/{$data['headimg']}" alt=""></div>
					<div>
						<p><span>用户姓名</span><span style="margin-left:30px;">{$data['name']}</span></p>
						<p><span>用户手机</span><span style="margin-left:30px;">{$data['mobile']}</span></p>
						<p><span>管辖区域</span><span style="margin-left:30px;">{$data['area']}</span></p>
						<p><span>身份证号</span><span style="margin-left:30px;">{$data['cert_id']}</span></p>
						<p><span>邀请码</span><span style="margin-left:30px;">{$data['invite_code']}</span></p>
					</div>
				</div>
			</div>
			<div class="subaccount">
				<div @click="addaccount=true" v-if="!subaccount"><i class="el-icon-circle-plus" style="color:blue;margin-right: 4px;"></i><span>添加子账号</span></div>
				<div class="account" v-if="subaccount">
					<div class="workerinfo">
						<div class="infotitle">子账号信息
							<div class="editinfo"><span @click="addaccount=true" >修改</span></div>
						</div>
						<div class="baseinfo">
							<div>
								<p><span>用户昵称</span><span>{{subname}}</span></p>
								<p><span>登录手机</span><span>{{subphone}}</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="jobinfo">
			<div class="workerinfo">
				<div class="infotitle">基本信息</div>
				<div class="baseinfo">
					<div>
						<p><span>注册时间</span><span>{:format_date($data['add_time'])}</span></p>
						<p><span>累计金额</span><span>18990元（人民币）</span></p>
						<p><span>钱包金额</span><span>2648元（人民币）</span></p>
						<p><span>收款账号</span><span>中国银行   132323632541</span></p>
					</div>
				</div>
			</div>
			<div class="teaminfo">
				<div class="infotitle">团队信息</div>
				<div class="baseinfo">
					<div>
						<p><span>公司名称</span><span>{$data['company_name']}</span></p>
						<p><span>公司法人</span><span>{$data['corporation_name']}</span></p>
						<p><span>联系电话</span><span>{$data['mobile']}</span></p>
						<p><span>公司地址</span><span>{$data['detail_address']}</span></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="other">
		<el-tabs v-model="activename" type="card" @tab-click="handleClick">
			<el-tab-pane label="管辖师傅" name="first">
				<div class="searchbox">
					<el-input size="small" placeholder="请输入内容" @keyup.enter.native="changeParam" v-model="param.key">
						<i slot="suffix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<div class="table">
					<el-table :data="tableData" style="width: 100%" :cell-style= "{ 'text-align': 'center'}" :header-cell-style="{ 'text-align':'center'}">
						<el-table-column prop="avaimg" label="头像">
							<template slot-scope="scope">
								<img :src="scope.row.headimg" alt="">
							</template>
						</el-table-column>
						<el-table-column prop="name" label="昵称"></el-table-column>
						<el-table-column prop="mobile" label="登录手机"></el-table-column>
						<el-table-column prop="money" label="累计金额">
							<template slot-scope="scope">{{scope.row.money}}元（人民币） </template>
						</el-table-column>
						<el-table-column prop="stauts" label="状态">
							<template slot-scope="scope">
								<span v-if="scope.row.status == 1">待审核</span>
								<span v-if="scope.row.status == 2">审核不通过</span>
								<span v-if="scope.row.status == 3">审核通过</span>
							</template>
						</el-table-column>
						<el-table-column prop="option" label="操作">
							<template slot-scope="scope">
								<span  @click="toDetail(scope.row.id)" style="border: 1px solid #ccc;color: #409EFF;padding:0px 10px;border-radius: 3px;display: inline-block;">查看</span>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="pagenation">
					<el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
								   @current-change="handleCurrentChange" :page-size="param.size" :total="total"></el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane label="相关文件" name="second">
				<div class="files">
					<div class="license">
						<div class="name">营业执照</div>
						<div class="img"><img src="/{$data['business_license']}" alt=""></div>
					</div>
					<div class="contract">
						<div class="name">合同</div>
						<div class="img"><img src="/{$data['contract']}" alt=""></div>
					</div>
					<div class="idcard">
						<div class="name">法人身份证</div>
						<div class="img"><img src="/{$data['certid_front']}" alt=""></div>
						<div class="img"><img src="/{$data['certid_side']}" alt=""></div>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
	<el-dialog title="添加子账号" :visible.sync="addaccount" width="450px">
		<el-input placeholder="请输入用户昵称" v-model="subname"></el-input>
		<el-input placeholder="请输入登录手机号" v-model="subphone"></el-input>
		<el-input placeholder="请输入密码" v-model="subpassword" show-password></el-input>
		<div class="dialogbtn">
			<el-button type="primary" size="medium" @click="confirmAdd">确定</el-button>
			<el-button @click="addaccount =false">取消</el-button>
		</div>
	</el-dialog>
</block>
<block name="js">
	<script>
        new Vue({
            el: '#app',
            data: function() {
                return {
                    citynow: "",
                    searchinput: "",
                    activename: "first",
                    addaccount: false,
                    subaccount: false,
                    statusnow: 1, // 启用 or 停用
                    subname: "",
                    subphone: "",
                    subpassword: "",
					id: "{$data['id']}",
					param:{
						key: '',
						partner_id: '{$data["id"]}',
						page: 1,
						size: 10,
					},
					total: 0,
                    tableData: [
                    ]
                }
            },
			created: function () {
				this.getData();
            },
            methods: {
                getData: function () {
                    var _this = this;
                    $.post(HOME_URL + '/orderAdmin/partner/getWorker', _this.param, function (data) {
                        if(data.status){
                            _this.total = parseInt(data.data.count);
                            _this.tableData = data.data.data;
                        }else{
                            _this.$message.error(data.msg);
                        }
                    }, 'json');
                },
                changeParam: function () {
					this.param.page = 1;
					this.getData();
                },
                handleSizeChange: function (size) {
                    this.param.size = size;
                    this.getData();
                },
                handleCurrentChange: function (page) {
                    this.param.page = page;
                    this.getData();
                },
                handleClick(tab, event) {
                    console.log(tab, event);
                },
                toDetail(id) {
                    window.location.href = HOME_URL+ "/orderAdmin/Worker/detail?id=" + id;
                },
                confirmAdd() {
                    if (this.subname && this.subphone && this.subpassword) {
                        this.addaccount = false
                        this.subaccount = true
                    } else {
                        this.$notify.info({
                            title: '提示',
                            message: '请完善所有信息'
                        });
                    }
                },
                toEdit() {
                    window.location.href = HOME_URL + "/orderAdmin/Partner/edit?type=edit&id=" + this.id;
                }
            }
        });
	</script>
</block>
